<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link rel="stylesheet" href="elementui/index.css">-->

<!--    <script src="elementui/index.js"></script>-->
</head>
<body>
<a href="add.html">添加</a>
        <div id="app">
            <table>
                <tr>
                    <td>id</td>
                    <td>userid</td>
                    <td>姓名</td>
                    <td>名称</td>
                    <td>价格</td>
                    <td>数量</td>
                    <td>地址</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in page.records">

                    <td>{{item.id}}</td>
                    <td>{{item.username}}</td>
                    <td>{{item.address}}</td>
                    <td>{{item.duration}}</td>
                    <td>{{item.user_id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.num}}</td>
                    <td>
                        <a :href="'update.html?id='+item.id">修改</a>
                        <a @click="del(item.id)">删除</a>
                    </td>
                </tr>
            </table>
            <button @click="findPage(pageIndex=1)">首页</button>
            <button @click="findPage(pageIndex=page.current-1)">上一页</button>
            <button @click="findPage(pageIndex=page.current+1)">下一页</button>
            <button @click="findPage(pageIndex=page.pages)">尾页</button>

        </div>

<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/util.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            page:{},
    },
        created(){
            this.findPage(1)
        },
        methods:{
            del(id){
                axios.post("/order/del?id="+id).then(
                    res=>{
                        this.findPage(1)
                    }
                )
            },
            findPage(pageIndex){
                axios.post("/order/findPage?pageIndex="+pageIndex).then(
                    res=>{
                        //alert(11)
                        this.page=res.data
                    }
                )
            }
        }
    })
</script>
</body>
</html>